<template>
    <div class="more_body_">
        <div class="more_centered">
            <div class="myheader_">
                <div class="_back"><a href="#/index" style="text-decoration: none;">&lt;</a></div>
                <div class="mine_">
                    <span>教育产品</span>
                </div>
            </div>
            <div class="product-list">
                <div class="product-item" v-for="(item) in productList" :key="item.id" @click="goToProductDetail(item.id)">
                    <img :src="item.image" alt="product image" class="product-image" />
                    <div class="product-info">
                        <h3 class="product-name">{{ item.name }}</h3>
                        <p class="product-price">￥{{ item.price }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>

export default {
    data() {
        return {
            productList: [
                // 这里是你的商品数据
            ],
        };
    },
    methods: {
        // 获取产品列表数据
        fetchProductList() {
            this.$http.get('/api/products/queryProductOnStatus')
                .then(response => {
                    this.productList = response.data.data.rows;
                })
                .catch(error => {
                    this.$message.error("请求错误");
                });
        },
        //跳转产品详情页面
        goToProductDetail(productId) {
            const jwt = localStorage.getItem('jwt');
            if (jwt) {
                const decoded = jwtDecode(jwt);
                const studentId = decoded.id; // 确保你的token结构中有id字段
                const IdData = {
                    productId: productId,
                    studentId: studentId
                };
                this.$http.post('/api/students/addStudentBehavior', IdData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    if (response.data.code === 1) {

                    } else {
                        this.$message.error(response.data.message);
                    }
                })
                    .catch(error => {
                        // 处理请求失败的逻辑
                        this.$message.error("报名请求出错，请稍后重试");
                    });
                this.$router.push({ name: 'ProductDetail', params: { id: productId } });
            }
            else {
                this.$router.push({ name: 'ProductDetail', params: { id: productId } });
            }
        },
    },
    mounted() {
        this.fetchProductList();//获取产品列表信息
    },
};
</script>
  
<style>
@import "@/style/productMore.css";
</style>